<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="420"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    const width = canvas.width;
    const height = canvas.height;

    // Set a white background for the whole canvas, as seen in the problem layout
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, width, height);

    // Define the gray square properties, which frames the main phenomenon
    const squareSize = 320;
    const squareX = (width - squareSize) / 2;
    const squareY = (height - squareSize) / 2;
    const bgColor = '#8A8A8A'; // A neutral gray similar to the image

    // Draw the gray square background
    ctx.fillStyle = bgColor;
    ctx.fillRect(squareX, squareY, squareSize, squareSize);

    // Define the properties for the Newton's rings pattern
    const cx = width / 2;
    const cy = height / 2;
    const maxRadius = squareSize / 2; // The pattern is inscribed within the square

    // Create a radial gradient to draw the rings smoothly.
    // This is the most effective way to represent the continuous intensity variation and fading contrast.
    const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, maxRadius);

    // Define color stops for the gradient to create the concentric rings.
    // The radii of the rings follow r ~ sqrt(m), where m is the order.
    // The contrast (difference between bright and dark color values) decreases for higher order m.
    
    // Parameters for the pattern
    const S = 65; // A scale factor for radii to control the ring spacing
    const R_MAX_PATTERN = maxRadius; // The radius over which the entire gradient is defined

    // Add color stops. Positions are calculated as (S * sqrt(m)) / R_MAX_PATTERN
    // The order 'm' for bright rings is m = 0.5, 1.5, ... and for dark rings is m = 0, 1, 2, ...

    // Center is a dark spot (m=0)
    gradient.addColorStop(0, '#000000');
    gradient.addColorStop(S * Math.sqrt(0.1) / R_MAX_PATTERN, '#000000'); // small dark core

    // 1st bright ring (m~0.5) and 1st dark ring (m=1) - high contrast
    gradient.addColorStop(S * Math.sqrt(0.4) / R_MAX_PATTERN, '#FFFFFF');
    gradient.addColorStop(S * Math.sqrt(1) / R_MAX_PATTERN, '#050505');

    // 2nd pair (m~1.5, m=2) - slightly reduced contrast
    gradient.addColorStop(S * Math.sqrt(1.5) / R_MAX_PATTERN, '#E5E5E5');
    gradient.addColorStop(S * Math.sqrt(2) / R_MAX_PATTERN, '#282828');

    // 3rd pair (m~2.5, m=3)
    gradient.addColorStop(S * Math.sqrt(2.5) / R_MAX_PATTERN, '#C8C8C8');
    gradient.addColorStop(S * Math.sqrt(3) / R_MAX_PATTERN, '#484848');

    // 4th pair (m~3.5, m=4) - contrast noticeably lower, as mentioned in the problem
    gradient.addColorStop(S * Math.sqrt(3.5) / R_MAX_PATTERN, '#B8B8B8');
    gradient.addColorStop(S * Math.sqrt(4) / R_MAX_PATTERN, '#606060');

    // 5th pair - fading out significantly
    gradient.addColorStop(S * Math.sqrt(4.5) / R_MAX_PATTERN, '#A8A8A8');
    gradient.addColorStop(S * Math.sqrt(5) / R_MAX_PATTERN, '#707070');

    // 6th pair - very faint, blending with background
    gradient.addColorStop(S * Math.sqrt(5.5) / R_MAX_PATTERN, '#9A9A9A');
    gradient.addColorStop(S * Math.sqrt(6) / R_MAX_PATTERN, '#808080');

    // Fade smoothly to the background color at the edge of the pattern
    gradient.addColorStop(S * Math.sqrt(6.5) / R_MAX_PATTERN, bgColor);
    gradient.addColorStop(1, bgColor);

    // Draw the circular pattern by filling a circle with the defined gradient
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(cx, cy, maxRadius, 0, 2 * Math.PI);
    ctx.fill();

</script>
</body>
</html>